<template>
  <div class="openlayer h-100 w-100 relative">
    <open-layers :option="option" @mapcreated="mapcreated" />
    <el-dropdown @command="dropClick" class="absolute" style="top: 77px; right: 5px;">
      <el-button type="primary">
        更多功能<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item :divided="true" command="zoom-in"><i class="el-icon-zoom-in"/>放大</el-dropdown-item>
        <el-dropdown-item :divided="true" command="zoom-out"><i class="el-icon-zoom-out"/>缩小</el-dropdown-item>
        <el-dropdown-item :divided="true" command="typhoon-path"><i class="el-icon-location"/>台风路径</el-dropdown-item>
        <el-dropdown-item :divided="true" command="typhoon-route"><i class="el-icon-location"/>动态台风轨迹</el-dropdown-item>
        <el-dropdown-item :divided="true" command="typhoon-route-solar"><i class="el-icon-location"/>带风圈的台风轨迹</el-dropdown-item>
        <el-dropdown-item :divided="true" command="typhoon-hover"><i class="el-icon-location"/>给点添加hover事件</el-dropdown-item>
        <el-dropdown-item :divided="true" command="typhoon-overlay"><i class="el-icon-location"/>给点添加叠加层</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <typhoonDetail ref="typhoonInfo" :typhoonInfo="typhoonInfo"/>
  </div>
</template>
<script>
import View from "ol/View";
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";
import { Style, Fill, Stroke, Text } from "ol/style";
import WKT from "ol/format/WKT";
import index1 from './mixin/index1'
import OpenLayers from "@/components/openlayers";
import typhoonDetail from './components/typhoon-detail.vue'
export default {
  components: {
    OpenLayers,
    typhoonDetail
  },
  mixins: [index1],
  data() {
    return {};
  },
  computed: {
    option() {
      return {
        view: new View({
          center: [12957563, 4851607], // 北京
          zoom: 4,
        }),
        baseLayerMode: "",
        mapType: "vector",
        map: {}, // ol实例
      };
    },
  },
  methods: {
    mapcreated(map) {
      this.map = map
    },
    initMap() {

    },
    dropClick(item) {
      console.log(item)
      if (item === 'zoom-out') {
        this.zoomOut()
      } else if (item === 'zoom-in') {
        this.zoomIn()
      } else if (item === 'typhoon-path') {
        this.drawTyphoonPath()
      } else if (item === 'typhoon-route') {
        this.drawTyphoonPathInterval()
      } else if (item === 'typhoon-route-solar') {
        this.drawTyphoonPathInterval(true)
      } else if (item === 'typhoon-hover') {
        this.designHoverOnMap() // 给map添加hover事件
      } else if (item === 'typhoon-overlay') {
        this.addOverlay()
      }
    },
  },
};
</script>
